<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html,body,#map-canvas {
	height: 100%;
	margin: 0px;
	padding: 0px
}
</style>
<title>Place search pagination</title>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization"></script>
<script>
	var map, placesList;

	function initialize() {
		var pyrmont = new google.maps.LatLng(55.9410655, -3.2053836);

		map = new google.maps.Map(document.getElementById('map-canvas'), {
			center : pyrmont,
			zoom : 17
		});

		var types = [ "accounting", "airport", "amusement_park", "aquarium",
				"art_gallery", "atm", "bakery", "bank", "bar", "beauty_salon",
				"bicycle_store", "book_store", "bowling_alley", "bus_station",
				"cafe", "campground", "car_dealer", "car_rental", "car_repair",
				"car_wash", "casino", "cemetery", "church", "city_hall",
				"clothing_store", "convenience_store", "courthouse", "dentist",
				"department_store", "doctor", "electrician",
				"electronics_store", "embassy", "establishment", "finance",
				"fire_station", "florist", "food", "funeral_home",
				"furniture_store", "gas_station", "general_contractor",
				"grocery_or_supermarket", "gym", "hair_care", "hardware_store",
				"health", "hindu_temple", "home_goods_store", "hospital",
				"insurance_agency", "jewelry_store", "laundry", "lawyer",
				"library", "liquor_store", "local_government_office",
				"locksmith", "lodging", "meal_delivery", "meal_takeaway",
				"mosque", "movie_rental", "movie_theater", "moving_company",
				"museum", "night_club", "painter", "park", "parking",
				"pet_store", "pharmacy", "physiotherapist", "place_of_worship",
				"plumber", "police", "post_office", "real_estate_agency",
				"restaurant", "roofing_contractor", "rv_park", "school",
				"shoe_store", "shopping_mall", "spa", "stadium", "storage",
				"store", "subway_station", "synagogue", "taxi_stand",
				"train_station", "travel_agency", "university",
				"veterinary_care", "zoo" ];
		var request = {
			location : pyrmont,
			radius : 10000,
			types : [ 'establishment' ]
		};

		placesList = document.getElementById('places');

		var service = new google.maps.places.PlacesService(map);
		service.nearbySearch(request, callback);
	}

	function callback(results, status, pagination) {
		if (status != google.maps.places.PlacesServiceStatus.OK) {
			return;
		} else {
			createMarkers(results);

			if (pagination.hasNextPage) {
				var moreButton = document.getElementById('more');

				moreButton.disabled = false;

				google.maps.event.addDomListenerOnce(moreButton, 'click',
						function() {
							moreButton.disabled = true;
							pagination.nextPage();
						});
			}
		}
	}

	function createMarkers(places) {
		var locations = [];

		var bounds = new google.maps.LatLngBounds();

		for (var i = 0, place; place = places[i]; i++) {
			var image = {
				url : place.icon,
				size : new google.maps.Size(71, 71),
				origin : new google.maps.Point(0, 0),
				anchor : new google.maps.Point(17, 34),
				scaledSize : new google.maps.Size(25, 25)
			};

			var marker = new google.maps.Marker({
				map : map,
				icon : image,
				title : place.name,
				position : place.geometry.location
			});
			locations.push(place.geometry.location);
			//console.log(place.geometry.location.toString())
			placesList.innerHTML += '<li>' + place.name + '</li>';

			bounds.extend(place.geometry.location);
		}
		console.log(locations)
		load_heatmap(map, locations);

		map.fitBounds(bounds);
	}

	function load_heatmap(map, locations) {
		var heatMapData = [];
		for (var i = 0; i < locations.length; i++) {
			heatMapData.push({
				location : locations[i],
				weight : 5
			})
		}
		heatmap = new google.maps.visualization.HeatmapLayer(
				{
					maxIntensity : 11,
					data : heatMapData,
					gradient : [
							"rgba(0, 255, 255, 0)"/* first one should be transparent*/,
							"rgba(156, 255, 156, 0.6)",
							"rgba(49, 255, 0, 0.6)", "rgba(49, 207, 0, 0.6)",
							"rgba(255, 255, 0, 0.6)", "rgba(255, 207, 0, 0.6)",
							"rgba(255, 154, 0, 0.6)",
							"rgba(255, 100, 100, 0.6)", "rgba(255, 0, 0, 0.6)",
							"rgba(153, 0, 0, 0.6)", "rgba(206, 48, 255, 0.6)" ],
					//radius : 20,
					opacity : 1

				});
		heatmap.setMap(map);

	}
	google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style>
#results {
	font-family: Arial, Helvetica, sans-serif;
	position: absolute;
	right: 5px;
	top: 50%;
	margin-top: -195px;
	height: 380px;
	width: 200px;
	padding: 5px;
	z-index: 5;
	border: 1px solid #999;
	background: #fff;
}

h2 {
	font-size: 22px;
	margin: 0 0 5px 0;
}

ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	height: 321px;
	width: 200px;
	overflow-y: scroll;
}

li {
	background-color: #f1f1f1;
	padding: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

li:nth-child(odd) {
	background-color: #fcfcfc;
}

#more {
	width: 100%;
	margin: 5px 0 0 0;
}
</style>
</head>
<body>
	<div id="map-canvas"></div>
	<div id="results">
		<h2>Results</h2>
		<ul id="places"></ul>
		<button id="more">More results</button>
	</div>
</body>
</html>